<template>
  <div class="student-page">
    <el-card shadow="never" border="false">
      <template #header>
        <div class="header">
          <span>学员管理</span>
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            round
            @click="openDrawer"
          >
            添加学员
          </el-button>
        </div>
      </template>
      <el-table :data="studentList" style="width: 100%">
        <el-table-column prop="id" label="学员id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="salary" label="期望薪资"> </el-table-column>
        <el-table-column prop="truesalary" label="实际薪资"> </el-table-column>
        <el-table-column prop="province" label="籍贯（省）"> </el-table-column>
        <el-table-column prop="city" label="籍贯（市）"> </el-table-column>
        <el-table-column prop="county" label="籍贯（县/区）"> </el-table-column>
        <el-table-column prop="address" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="delData(scope)">删除</el-button>
            <el-button type="text" @click="redactData(scope)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer
      :title="title"
      :visible.sync="visible"
      :before-close="closeDrawer"
      :wrapperClosable="true"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="auto">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="期望薪资" prop="salary">
          <el-input v-model="form.salary"></el-input>
        </el-form-item>
        <el-form-item label="实际薪资" prop="truesalary">
          <el-input v-model="form.truesalary"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addData">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { addStudent, delStudent, getStudentData, getStudentDetail, editStudent } from '@/api/student'
export default {
  name: 'StudentIndex',
  data () {
    return {
      studentList: [],
      form: {
        name: '',
        sex: '',
        age: '',
        group: '1',
        phone: '',
        salary: '',
        truesalary: '',
        province: '河南省',
        city: '南阳市',
        county: '西峡县'
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        salary: [
          { required: true, message: '请输入期望薪资', trigger: 'blur' }
        ],
        truesalary: [
          { required: true, message: '请输入薪资', trigger: 'blur' }
        ]
      },
      title: '添加学员',
      visible: false
    }
  },
  created () {
    this.listData()
  },
  methods: {
    async listData () {
      const { data } = await getStudentData()
      this.studentList = data.data
    },
    // 删除
    async delData (scope) {
      const result = this.studentList.find((item) => {
        if (item.id === scope.row.id) {
          return item
        }
        return false
      })
      await delStudent(result.id)
      this.studentList.splice(scope.$index, 1)
      this.$message.success('删除成功')
    },
    // 编辑
    async redactData (scope) {
      this.title = '编辑学员'
      this.visible = true
      const { data } = await getStudentDetail(scope.row.id)
      this.form = data.data
      console.log(this.form)
    },
    // 打开抽屉
    openDrawer () {
      this.title = '添加学员'
      this.visible = true
    },
    // 关闭抽屉执行的回调
    closeDrawer (done) {
      this.$refs.form.resetFields()
      this.visible = false
      done()
    },
    // 关闭抽屉
    close () {
      this.$refs.form.resetFields()
      this.visible = false
    },
    // 添加
    async addData () {
      if (this.title === '编辑学员') {
        await this.$refs.form.validate()
        delete this.form.user_id
        delete this.form.wei
        delete this.form.jing
        await editStudent(this.form)
        this.$message.success('编辑成功')
        this.visible = false
        this.listData()
      } else {
        await this.$refs.form.validate()
        await addStudent(this.form)
        this.$message.success('添加成功')
        this.listData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
  }
  .actions {
    font-size: 18px;
    display: flex;
    justify-content: space-around;
    color: #666;
    > i:hover {
      color: rgba(114, 124, 245, 1);
      cursor: pointer;
    }
  }
}
</style>
